<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/dl.css">
 
</head>

<body>
 <div class="container">
   <!-- 注册 -->
   <div class="container-form container-signup">
     <form action="#" class="form" id="form1">
       <h2 class="form-title">注册账号</h2>
       <input id="name1" type="text" placeholder="输入用户名" class="input" />
       <input id="email" type="email" placeholder="邮箱账号" class="input" />
       <input id="pass" type="password" placeholder="密码" class="input" />
       <button id="zhu" type="button" class="btn">点击注册</button>
     </form>
   </div>
 
   <!-- 登录 -->
   <div class="container-form container-signin">
     <form action="#" class="form" id="form2">
       <h2 class="form-title">欢迎登录</h2>
       <input id="email1" type="email" placeholder="邮箱账号" class="input" />
       <input id="pass1" type="password" placeholder="密码" class="input" />
       <a href="#" class="link">忘记密码?</a>
       <button id="deng" type="button"  class="btn"><a href="index.html">登 录</a></button>
     </form>
   </div>

   <!-- 叠加层部分 -->
   <div class="container-overlay">
     <div class="overlay">
       <div class="overlay-panel overlay-left">
         <button class="btn" id="signIn">
           已有账号，直接登录
         </button>
       </div>
       <div class="overlay-panel overlay-right">
         <button class="btn" id="signUp">
           没有账号，点击注册
         </button>
       </div>
     </div>
   </div>
 </div>
</body>
<script>

const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");
const container = document.querySelector(".container");

signInBtn.addEventListener("click", () => {
container.classList.remove("panel-active");
});

signUpBtn.addEventListener("click", () => {
container.classList.add("panel-active");
});



</script>

</html>